import React from 'react';
import { ScrollView, View, Text } from "react-native";
import _ from 'lodash';
import { Scene, Actions } from 'react-native-router-flux';
import ResultList from './resultList';
import Header from '../../../components/editorHeader';
import styles from './resultList/styles';

class CustomerList extends React.Component {
  back = () => {
    Actions.replace(this.props.backTo, {
      ...this.props.props,
      values: this.props.values
    })
  }
  setValue = value => {
    const {
      name: customerName,
      mobile: customerMobile,
      idCardNo: customerIdNo,
      gender: customerGender,
      birthday: customerBirthday
    } = value;
    const _value = {
      customerName,
      customerMobile,
      customerIdNo,
      customerGender,
      customerBirthday
    }
    const resValue = {};
    _.forEach(_value, (val, key) => {
      if (val) {
        resValue[key] = val
      }
    })
    Actions.replace(this.props.backTo, {
      ...this.props.props,
      values: {...this.props.values, ...resValue}
    })
  }
  render() {
    return (
      <View style={{ flex: 1 }}>
        <Header
          onCancel={this.back}
          title="查询结果"
        />
        <Text style={{padding: 10, backgroundColor: '#ddd'}}>
          {`关键字："${this.props.keyword}"，查询到${this.props.list.length}位客户`}
        </Text>
        <ScrollView style={styles.resultList}>
          {_.map(this.props.list, data => (
            <ResultList
              key={data.customerId}
              data={data}
              onPress={this.setValue.bind(null, data)}
            />
          ))}
        </ScrollView>
      </View>
    );
  }
}

module.exports = (
  <Scene
    key="searchResults"
    component={CustomerList}
    hideNavBar={false}
    hideTabBar
    back={false}
    hideNavBar
    path="edit/activity/customer"
    title="搜索客户结果"
  />
)